<template>
  <div :style="{ height: height + 'px' }" class="header">
    <slot></slot>
  </div>


</template>

<script setup lang="ts">
// 1. 基础写法（使用数组）
// const c = defineProps(['height'])
// console.log(c)

// 2. 对象写法（带类型验证
// const props = defineProps({
//   height: {
//     type: Number,
//     required: true  //表示父组件必须传递这个属性
//   }
// })
// console.log(props)

// 3. 带默认值的写法
// const props = defineProps({
//   height: {
//     type: Number,
//     default: 320
//   }
// })
// console.log(props)

// 4. 带类型验证(ts)
defineProps<{ height?: number }>()
// const props = defineProps<{ height?: number }>()
// console.log(props)

</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 329px;
  background-image: url(../static/imgs/images/home-bg.png);
  background-size: cover;
  // background-position: center;
  text-align: center;
  position: relative;
  padding-top: 110px;
  animation: move .8s linear;

}

@keyframes move {
  0% {
    opacity: 0;
    transform: translateY(-6%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
